<template>
    <div>
        <div class="ODdiv5" style="border-bottom: 0px;height: 40px;">
            <div class="leftstep">
                <img src="../../../assets/myps/stepleft.png">
            </div>
            <div>
                <span class="time">{{paytime==null?ordertime:paytime}}</span>
                <span class="time" style="font-weight:550;font-size:14px">{{Status==0?'订单已取消':'订单已支付'}}</span>
                <span class="text">{{Status==0?'您的订单已经取消，原因：超时未支付，订单已自动取消':'您的订单已经支付'}}</span>
            </div>
        </div>
        <div class="ODdiv5" style="color: rgb(155, 155, 155);">
            <div>
                <span class="time">{{ordertime}}</span>
                <span class="time" style="font-weight:650;font-size:14px">已下单</span>
                <span class="text" style="margin-left:-40px">您的订单已经提交</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'XiaoODTDown',
        data(){
            return{
                ordertime:'2022-03-03 17:45:05',
                paytime:'',
                Status:99,
            }
        },
        mounted(){
            this.$bus.$on('orderandpayTime',(ordertime,paytime)=>{
                this.ordertime=ordertime
                this.paytime=paytime
            })
            this.$bus.$on('Status',(Status)=>{
                this.Status=Status
            })
        },
        beforeDestroy(){
            this.$bus.$off('orderandpayTime')
            this.$bus.$off('Status')
        }
    }
</script>

<style scoped>
.ODdiv5{
    background-color: rgb(250, 250, 255);
    font-size: 12px;
    margin-right: 20px;
    margin-left: 20px;
    padding-left: 15px;
    padding-top: 15px;
    height: 60px;
    border-bottom: 1px solid rgb(212, 212, 212);
}
.leftstep{
    position: absolute;
    width: 15px;
    height: 115px;
}
.time{
    margin-left: 40px;
}
.text{
    margin-left: -70px;
    margin-top: 25px;
    position: absolute;
}
</style>